<!-- 活动详情 -->
<template>
  <view class="detail">
    <PageWarpper>
      <template v-slot:main>
        <view class="detail_content" v-html="repairRichText(pageData.actDesc?pageData.actDesc:pageData.title)"></view>
      </template>
    </PageWarpper>
    <!--活动状态：购票、停止售票、已结束-->
    <Option>
      <template v-slot:btn>
        <view class="detail_btn">
          <button
            class="black-btn siyuan-medium d-flex"
            :class="{ default: payStatus }"
            @click="openPopup()"
          >
            {{ btnList[payStatus].name }}
            <text class="intel-one-mono-medium">{{ btnList[payStatus].es_name }}</text>
          </button>
        </view>
      </template>
    </Option>
    <!--活动弹窗-->
    <ActivityPopup
      v-model:show-popup="showPopup"
      :status-item="popupStatus[count]"
      :item-data="pageData"
      :point-data="pointData"
      :order-no="orderNo"
      v-model:count="count"
      @changeOrder="getOrderInfo"
    />
  </view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, watch } from "vue";
import PageWarpper from "@/components/Layer/PageWarpper.vue";
import ActivityPopup from "@/components/Popup/ActivityPopup.vue";
import Option from "@/components/FooterBar/Option.vue";
import { getActDetail, getOrderDetail, getOrderPreDetail } from "@/server/api.js";
import { openPage, getPayData } from "@/util/index.js";
import { repairRichText } from "@/util/index.js";

let btnList = ref([
  { name: "购票", es_name: "Buy" },
  { name: "停止购票", es_name: "Full" },
  { name: "已结束", es_name: "End" },
]);

let pageData = ref({}); // 活动详情
let showPopup = ref(false);
let count = ref(0); // 弹窗
let payStatus = ref(0);
let orderNo = ref("");
let pointData = ref({}); // 积分信息
// 弹窗类型
let popupStatus = ref([
  { name: "购买", status: 0, next_status: 1 },
  {
    name: "支付",
    status: 1,
    back_status: 0,
    next_status: 3,
    img_bl: "margin-top:40rpx",
    img_style: "width:306rpx;height:406rpx",
    is_line_feed: true,
  },
  {
    name: "待入场",
    status: 2,
    shou_title: true,
    img_style: "width:174rpx;height:230rpx",
    is_line_feed: false,
  },
  {
    name: "待付款",
    status: 3,
    back_status: 0,
    img_name: "pay_wait",
    img_style: "width:174rpx;height:230rpx",
    is_line_feed: false,
  },
  {
    name: "已取消",
    status: 4,
    img_name: "pay_cancle",
    img_style: "width:174rpx;height:230rpx",
    is_line_feed: false,
  },
  {
    name: "已退款",
    status: 5,
    img_name: "pay_refund",
    img_style: "width:174rpx;height:230rpx",
    is_line_feed: false,
  },
  {
    name: "已核销",
    status: 6,
    img_name: "pay_success",
    img_style: "width:174rpx;height:230rpx",
    is_line_feed: false,
  },
  {
    name: "已过期",
    status: 7,
    img_name: "pay_cancle",
    img_style: "width:174rpx;height:230rpx",
    is_line_feed: false,
  },
]);

const openPopup = () => {
  if (payStatus.value != 0) return;
  showPopup.value = true;
};

watch(
  () => showPopup,
  val => {
    if (!val) {
      // 关闭弹窗
      count.value = 0;
      getDetail(pageData.value.id);
      getPointData();
      orderNo.value = "";
    }
  }
);
function getOrderInfo(order) {
  if (!order) return;
  orderNo.value = order;
  getOrderDetail({
    orderNo: order,
  }).then(res => {
    // 处理状态
    switch (res.data.orderStatus) {
      case 0:
        count.value = 3;
        break;
      case 1:
        count.value = 2;
        break;
      case 2:
        count.value = 6;
        break;
      case 4:
        count.value = 5;
        break;
	  case 5: // 已过期
	    count.value = 7;
	    break;
      case -1: // 已取消
        count.value = 4;
        break;
      default:
        break;
    }
    // delete res.data.actPictureUrlErect;
    pageData.value = { ...res.data, ...pageData.value };
    showPopup.value = true;
  });
}

function getDetail(id, orderno) {
  getActDetail({ id: id }).then(res => {
    res.data.actDesc = res.data.actDesc? res.data.actDesc.replaceAll(
      /\<img/gi,
      '<img style="max-width:100% !important;height:auto" '
    ):'';
    pageData.value = res.data;
    payStatus.value = getPayData(res.data.actStartTime, res.data.actEndTime, "index");
    if (orderno) {
      getOrderInfo(orderno);
    }
  });
}

function getPointData() {
  getOrderPreDetail().then(res => {
    let point = res.data.point;
    let pointExchangeRate = res.data.pointExchangeRate;
    pointData.value = {
      point: point,
      pointExchangeRate: pointExchangeRate,
    };
  });
}

onLoad(options => {
  orderNo.value = options.orderNo;
  getDetail(options.id, options.orderNo);
  getPointData();
});
</script>

<style lang="scss" scoped>
.detail {
  padding-bottom: 200rpx;
  .detail_content {
  }
}
.detail_btn {
  // position: fixed;
  // width: calc(100% - 40rpx);
  // left: 20rpx;
  // bottom: 1px;
  // padding-bottom: var(--inset-bottom-constant);
  // padding-bottom: var(--inset-bottom-env);
  .black-btn {
    width: 100%;
    height: 100rpx;
    padding: 0 240rpx;
    justify-content: space-between;
    line-height: 100rpx;
    border-top: 2rpx solid #000000;
    border-bottom: 2rpx solid #000000;
    text {
      color: inherit;
      line-height: inherit;
    }
  }
  .black-btn.default {
    background-color: #ffffff;
    color: var(--grey-text);
  }
}
</style>
